<template>
	<view class="container">
		<web-view :src="webUrl" @message="handleWebviewMessage" @error="handleError"></web-view>

		<!-- 侧边控制面板（始终存在，通过 showSidebar 控制内容） -->
		<cover-view v-if="showSidebar" class="side-trigger" @click="toggleSidebar">
			<cover-view class="indicator"></cover-view>
		</cover-view>
		<cover-view v-else class="sidepanel" @click="goSetting()">
			<cover-view>⚙设置</cover-view>
			️</cover-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				settings: {
					department: '',
					url: '',
					bedNumber: ''
				},
				webUrl: '',
				showSidebar: true // 默认隐藏，避免一进来就挡住
			}
		},
		onShow() {
			this.getLocalSetting();
			this.showSidebar = true;
		},
		
		methods: {
			toggleSidebar() {
				this.showSidebar = !this.showSidebar;
				// 这里可以后续打开真正的设置面板（比如 navigateTo）
			},
			goSetting() {
				console.log('click')
				uni.navigateTo({
					url: '../setting/setting'
				});
			},
			getLocalSetting() {
				const localSetting = uni.getStorageSync('systemSettings');
				if (localSetting) {
					this.settings = localSetting;
					this.webUrl = this.settings.url +
						'?bedId=' + encodeURIComponent(this.settings.bedNumber) +
						'&department=' + encodeURIComponent(this.settings.department);
					// this.webUrl = this.settings.url;
				} else {
					uni.navigateTo({
						url: '../setting/setting'
					});
				}
			},
			handleError(e) {
				console.log('WebView error:', e);
			},
			handleWebviewMessage(e) {
				console.log('收到 H5 消息:', e);
			}
		}
	}
</script>

<style>
	.container {
		width: 100vw;
		height: 100vh;
		position: relative;
	}

	/* 整个触发区域：宽 50px，透明，容易点击 */
	.side-trigger {
		position: fixed;
		top: 80px;
		/* 距离顶部适当位置 */
		right: 2px;
		width: 40px;
		/* 实际点击热区 */
		height: 40px;
		/* 高一点更容易点 */
		z-index: 9999;
		/* background-color: rgba(255,0,0,0.1); */
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	/* 视觉指示器：只显示一条细线 + 图标 */
	.indicator {
		width: 6px;
		height: 40px;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 3px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 14px;
		opacity: 0.7;
	}

	.sidepanel {
		position: fixed;
		top: 80px;
		right: 3px;
		width: 60px;
		height: 68px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.2);
	}
</style>